<template>
  <div id="app">
    <!-- 整页分为左右 -->
    <div>
      <!-- 最顶部 -->
      <div class="page-index">
          <el-row>
              <!-- 左边 -->
              <el-col :span="18">
                  <!-- 左边顶部 -->
                  <div class="page-index-left">
                      <div class="title"> DEMO</div>
                      <div class="top-product">
                          <div class="productList-view" :class="[hasClass?'isactive':'','productList-view']" @click="isShowProduct">产品列表</div>
                          <div class="line38"></div>
                          <div class="placeOrder">下单</div>
                          <div class="line38"></div>
                      </div>
                      <ul>
                          <li class="change-item" v-for="(item,index) in productList" :keys="index" >{{item}}</li>
                      </ul>
                      <div class="quota">
                          <div class="line38"></div>
                          <div class="quota-text">
                            指标
                          </div>
                          <div class="line38"></div>
                      </div>
                      <div class="quota">
                          <div class="quota-text">
                            指标
                          </div>
                          <div class="line38"></div>
                      </div>
                      <div class="quota">
                          <div class="quota-text">
                            指标
                          </div>
                          <div class="line38"></div>
                      </div>
                      <div class="">
                          <div class="margin10">11</div>
                      </div>
                       <div class="">
                          <div class="margin10">11</div>
                      </div>
                       <div class="">
                          <div class="margin10">11</div>
                      </div>
                       <div class="">
                          <div class="margin10">11</div>
                      </div>
                       <div class="">
                          <div class="margin10">11</div>
                      </div>
                  </div>
              </el-col>
              <!-- 右边 -->
              <el-col :span="6">
                 <div class="page-index-right">
                      <!-- 语言选择 -->
                      <div class="marginright10">
                          <el-select v-model="lanvalue" placeholder="请选择">
                              <el-option
                                v-for="item in lanoptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                <img :src="item.url" style="vertical-align:middle;width:36px;height:20px;margin-right: 7px;">
                                <span>{{item.label}}</span>
                              </el-option>
                          </el-select>
                      </div>
                      <!-- 登录 -->
                      <div class="padding15" @click="loginText">
                          登录
                      </div>
                      <div>
                        <span>｜</span>
                      </div>
                      <!-- 注册 -->
                      <div  class="padding15"  @click="registerText">
                          注册
                      </div>
                 </div>
              </el-col>
          </el-row>
      </div>
      <!-- 顶部下面内容 -->
      <div>
          <el-row>
              <el-col :span="18">
                  <div class="content-view">
                      <!-- 工具 -->
                      <div class="tools-view"></div>
                      <!-- 列表 -->
                      <div class="product-view" v-show="isShowFlag">
                          <div class="product-top">
                              <div class="search-view">
                                  <i class="el-icon-search"></i>
                                  <input class="searchinput" type="text">
                              </div>
                              <div  class="search-select">
                                  <el-select v-model="coinvalue" placeholder="请选择">
                                      <el-option
                                        v-for="item in coinoptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                      </el-option>
                                  </el-select>
                              </div>
                           </div>
                           <div class="list-view">
                                  <div class="list-item" v-for="(item,index) in coinlist" :keys="index">
                                      <div class="leftcoinname">
                                          <img class="coinImg" :src="item.url" alt="">
                                          <span>{{item.coinName}}</span>
                                      </div>
                                      <div class="" :class="[item.status==0?'total-number-blue':'total-number-red','total-number']">{{item.taotal}}</div>
                                      <span v-if="item.status==2" class="stopbuissness">休市</span>
                                      <span v-else :class="[item.status==0?'bluecolor':'redcolor','incrise']" class="" >{{item.incrise}}</span>
                                      
                                  </div>
                              </div>
                      </div>
                      <!-- K线图 -->
                      <div class="kline-view">
                          <div id="container"></div>
                      </div>
                  </div>
              </el-col>
              <el-col :span="6">
                  <div class="content-right">
                      <div class="available">
                          <div class="available-text">
                              可用资金
                          </div>
                          <div class="founds">
                            <span>28976.33</span>
                            <!-- <span>----</span> -->
                          </div>
                      </div>
                      <div class="handle-view">
                          <div class="coinname-text">BTCUSD</div>
                          <div class="coinfounds">28976.33</div>
                          <div class="price-view">
                              <el-select v-model="pricevalue" placeholder="请选择">
                                  <el-option
                                    v-for="item in priceoptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                              </el-select>
                          </div>
                          <div>
                              <p class="multip-text">倍数</p>
                              <el-select v-model="multiplevalue" placeholder="请选择">
                                  <el-option
                                    v-for="item in multipleoptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                  </el-option>
                              </el-select>
                          </div>
                          <div>
                              <div class="stoploss-view">
                                  <span class="stoploss-text">止损</span>
                                  <el-switch
                                    v-model="stoplossvalue"
                                    active-color="#0166fc"
                                    inactive-color="#cbcbcb">
                                  </el-switch>
                              </div>
                              <div class="stoploss-input">
                                  <el-input-number v-model="stoplossnum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                              </div>
                          </div>
                          <div>
                              <div class="stoploss-view">
                                  <span class="stoploss-text">止盈</span>
                                  <el-switch
                                    v-model="stopsurplusvalue"
                                    active-color="#0166fc"
                                    inactive-color="#cbcbcb">
                                  </el-switch>
                              </div>
                              <div class="stoploss-input">
                                  <el-input-number v-model="stopsurplusnum" @change="handlesurplusChange" :min="1" :max="10" label="描述文字"></el-input-number>
                              </div>
                          </div>
                          <div>
                              <p class="multip-text">买入数量(Step:0.01)</p>
                              <el-input-number v-model="buynum" @change="buynumChange" :min="1" :max="10" label="描述文字"></el-input-number>
                          </div>
                          <div class="bottom-handlingfees">
                              <div class="handlefees">
                                  <div>每手</div>
                                  <div> 1手 = 1 BTCUSD</div>
                              </div>
                              <div class="handlefees">
                                  <div>預估手續費</div>
                                  <div> 0</div>
                              </div>
                              <div class="handlefees">
                                  <div>預估保證金</div>
                                  <div> 4.267046</div>
                              </div>
                          </div>
                          <!-- 底部买入卖出 -->
                          <div class="btn-bottom">
                              <el-button type="primary" round>买入</el-button>
                              <el-button type="danger" round>卖出</el-button>
                          </div>
                      </div>
                  </div>
              </el-col>
          </el-row>
      </div>
       <!-- 弹窗 -->
      <el-dialog
        :title="setTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
        center
        >
          <div class="tab-view">
              <div class="tab-item" v-for="(item,index) in tabList" :keys="index" :class="{activeTab:tabnum==index}" @click="changeTab(index)">{{item}}</div>
          </div>
          <!-- 邮箱 -->
          <div v-show="tabnum==1">
              <div class="phone-text">
                  <div>邮箱</div>
              </div>
              <div class="view-phone">
                  <input class="input-phone" type="text" placeholder="请输入您的邮箱">
              </div>
          </div>
          <!-- 电话 -->
          <div  v-show="tabnum==0">
              <div class="phone-text">
                  <div>电话</div>
              </div>
              <div class="view-phone">
                  <input class="input-phone" type="text" placeholder="请输入您的电话">
              </div>
          </div>
          <!-- 密码 -->
          <div>
              <div class="phone-text">
                  <div>密码</div>
              </div>
              <div class="view-phone">
                  <input class="input-phone" type="text" placeholder="请输入密码">
              </div>
          </div>
          <!-- 再次输入密码 -->
          <div v-show="forgetFlag==true||registerFlag==true">
              <div class="phone-text">
                  <div>再次输入密码</div>
              </div>
              <div class="view-phone">
                  <input class="input-phone" type="text" placeholder="请输入密码">
              </div>
          </div>
          <!-- 邀请码 -->
          <div v-show="registerFlag==true">
              <div class="phone-text">
                  <div>邀请码</div>
              </div>
              <div class="view-phone">
                  <input class="input-phone" type="text" placeholder="请输入邀请码">
              </div>
          </div>
          <!-- 验证码 -->
          <div v-show="forgetFlag==true">
              <div class="phone-text">
                  <div>验证码</div>
              </div>
              <div class="captcha">
                  <input  class="input-captcha" type="text" placeholder="请输入验证码">
                  <div class="send-btn">发送</div>
              </div>
          </div>
           <!-- 生成验证码 -->
          <div v-show="registerFlag==true">
              <div class="phone-text">
                  <div>验证码</div>
              </div>
              <div class="captcha">
                  <input  class="input-captcha" type="text" placeholder="请输入验证码">
                  <div class="generateCode" :style="{ color: color }" @click="changeNum">{{code}}</div>
              </div>
          </div>
          <div  v-show="loginFlag==true" class="view-bottom">
              <div><span>新用户？</span><span class="joinNow" @click="registerNow">立即加入</span></div>
              <div class="forgetPass" @click="forgetPassworld">忘记密码</div>
          </div>
          <!-- 按钮 -->
          <div class="btn-view">
              <div  v-show="loginFlag==true" class="btn-group-bottom">登录</div>
              <div  v-show="loginFlag==true" class="btn-group-bottom">無需開戶，立即創建模擬賬戶進行交易！</div>
              <div  v-show="forgetFlag==true" class="btn-group-bottom">重置密码</div>
              <div  v-show="registerFlag==true" class="btn-group-bottom">注册</div>
          </div>
         
      </el-dialog>
    </div>
    
   </div>
</template>
<script>
  // 引入js
import { KLineChartPro, DefaultDatafeed } from '@klinecharts/pro'
// 引入样式
import '@klinecharts/pro/dist/klinecharts-pro.css'

// 创建实例
// const chart = new KLineChartPro({
//   container: document.getElementById('container'),
//   // 初始化标的信息
//   symbol: {
//     exchange: 'XNYS',
//     market: 'stocks',
//     name: 'Alibaba Group Holding Limited American Depositary Shares, each represents eight Ordinary Shares',
//     shortName: 'BABA',
//     ticker: 'BABA',
//     priceCurrency: 'usd',
//     type: 'ADRC',
//   },
//   // 初始化周期
//   period: { multiplier: 15, timespan: 'minute', text: '15m' },
//   // 这里使用默认的数据接入，如果实际使用中也使用默认数据，需要去 https://polygon.io/ 申请 API key
//   datafeed: new DefaultDatafeed(`${polygonIoApiKey}`)
// })
  
  export default {
      name: 'App',
      data () {
          return {
              code: '', // 保存验证码
				      color: '' ,// 保存颜色值
              setTitle:"欢迎登录",
              forgetFlag:false,
              loginFlag:true,
              registerFlag:false,
              tabList:["电话登录","邮箱登录"],
              tabnum:0,
              dialogVisible: false,
              hasClass:false,
              isShowFlag:true,
              coinlist:[
                {
                   url:'/static/hanqing/BTCUSD.png',
                   coinName:'BTCUSD',
                   taotal:"44823.22",
                   incrise:"+0.05%",
                   status:0//涨
                },
                {
                   url:'/static/hanqing/ETHUSD.png',
                   coinName:'ETHUSD',
                   taotal:"34823.68",
                   incrise:"-0.11%",
                   status:1//跌
                },
                {
                   url:'/static/hanqing/XAUUSD.png',
                   coinName:'XAUUSD',
                   taotal:"34823.68",
                   incrise:"-0.11%",
                   status:2//休市
                }
               

              ],
              productList:["1M","5M","15M","30M","1H","1D"],
              lanoptions: [{
                value: 'English',
                label: 'English',
                url:'/static/language/meiguo.png'
              }, {
                  value: '日本語',
                  label: '日本語',
                  url:'/static/language/riben.png'
              }, {
                  value: '한국어',
                  label: '한국어',
                  url:'/static/language/hanguo.png'
              }, {
                  value: '繁体中文',
                  label: '繁体中文',
                  url:'/static/language/fanti.png'
              },
              {
                  value: 'ไทย',
                  label: 'ไทย',
                  url:'/static/language/taiguo.png'
              }, {
                  value: 'Tiếng Việt',
                  label: 'Tiếng Việt',
                  url:'/static/language/yuenan.png'
              }, {
                  value: 'français',
                  label: 'français',
                  url:'/static/language/falanxi.png'
              }, {
                  value: 'Deutsche',
                  label: 'Deutsche',
                  url:'/static/language/deguo.png'
              }, {
                  value: 'Русский язык',
                  label: 'Русский язык',
                  url:'/static/language/eluosi.png'
              }, {
                  value: 'Español',
                  label: 'Español',
                  url:'/static/language/xibanya.png'
              }, {
                  value: 'Português',
                  label: 'Português',
                  url:'/static/language/putaoya.png'
              }, {
                  value: 'Italiano',
                  label: 'Italiano',
                  url:'/static/language/yidali.png'
              }, {
                  value: '"عربي',
                  label: '"عربي',
                  url:'/static/language/alabo.png'
              }, {
                  value: 'Türkçe',
                  label: 'Türkçe',
                  url:'/static/language/tuerqi.png'
              }, {
                  value: 'Indonesia',
                  label: 'Indonesia',
                  url:'/static/language/yindunixiya.png'
              }
              ],
              lanvalue: '繁体中文',
              coinoptions: [{
                value: 'Crypto',
                label: 'Crypto'
              }, {
                value: 'Forex',
                label: 'Forex'
              }, {
                value: 'Metal',
                label: 'Metal'
              }, {
                value: 'Oil',
                label: 'Oil'
              }, {
                value: 'NSE',
                label: 'NSE'
              }, {
                value: 'HK',
                label: 'HK'
              }, {
                value: 'CFD',
                label: 'CFD'
              }, {
                value: 'US',
                label: 'US'
              }],
              coinvalue: '',
             
              priceoptions: [{
                  value: '市价',
                  label: '市价'
                }, {
                  value: '挂单',
                  label: '挂单'
                }],
              pricevalue: '市价',
              multipleoptions: [{
                  value: '100',
                  label: '100'
                }, {
                  value: '200',
                  label: '200'
                }],
              multiplevalue: '100',
              stoplossvalue:true,
              stoplossnum: 1,
              stopsurplusvalue:true,
              stopsurplusnum: 1,
              buynum:1,
          }
      },
      methods: {
          // 点击顶部登录文字
          loginText(){
            this.dialogVisible=true;
            this.forgetFlag=false;
            this.registerFlag=false;
            this.loginFlag=true;
            this.setTitle='欢迎登录';
          },
          // 点击顶部注册文字
          registerText(){
              this.registerNow();
          },
          // 关闭弹窗
          handleClose(done) {
              done();
          },
          // 忘记密码显示
          forgetPassworld(){
            this.forgetFlag=true;
            this.registerFlag=false;
            this.loginFlag=false;
            this.setTitle='忘记密码';
          },
          // 注册显示
          registerNow(){
              this.randomCode();
              this.registerFlag=true;
              this.forgetFlag=false;
              this.loginFlag=false;
              this.setTitle='注册';
          },
          // 切换电话邮箱
          changeTab(index){
            this.tabnum=index;
          },
          // 点击生成随机验证码
          changeNum(){
            this.randomCode();
          },
          randomCode() {
            let code = '';
            for (let i = 0; i < 6; i++) {
              const digit = Math.floor(Math.random() * 10);
              code += digit;
            }
            this.code = code;
            // 生成随机颜色值
            const r = Math.floor(Math.random() * 256);
            const g = Math.floor(Math.random() * 256);
            const b = Math.floor(Math.random() * 256);
            this.color = `rgb(${r}, ${g}, ${b})`;
            return code;
          },
          // 是否展示产品列表
          isShowProduct(){
              this.hasClass=!this.hasClass;
              this.isShowFlag=!this.isShowFlag;
              
          },
          handleChange(value) {
              console.log(value);
          },
          handlesurplusChange(value){
              console.log(value);
          },
          buynumChange(value){
             console.log(value);
          },
      },
      mounted () {
         
      }
  }
</script>
<style scoped>
.generateCode{
  height:40px;
  line-height:40px;
  width:30%;
  text-align: center;
  font-size:20px;
}
.productList-view:hover{
    background-color: #dcebff;
}
.captcha{
    display: flex;
    justify-content: space-between;
    border-radius: 20px;
    background: #f8f8f8;
    height: 40px;
    margin-top:15px;
}
.input-captcha{
    height: 24px;
    width: 70%;
    background-color: transparent;
    color: #333;
    outline: none;
    border: none;
    padding: 8px 20px;
    font-size:14px;
}
.send-btn{
  width:30%;
  height:40px;
  line-height:40px;
  background-color: #0166fc;
  color:#fff;
  text-align: center;
  border-radius: 20px;
  font-size:12px;
}
/deep/ .el-dialog{
  border-radius: 10px;
}
.btn-view{
   width:100%;
}
.btn-group-bottom{
  margin-top:20px;
  height:40px;
  line-height:40px;
  border-radius:20px;
  text-align: center;
  background-color: #0166fc;
  color:#fff;
  width:100%;
  cursor: pointer;
}
.view-bottom{
  display: flex;
  justify-content: space-between;
  font-size:12px;
  margin-top:22px;
}
.joinNow{
  color:#0166fc;
  margin-left:3px;
  cursor: pointer;
}
.forgetPass{
  cursor: pointer;
}
.phone-text{
  margin-top:20px;
}
.view-phone{
    border-radius: 20px;
    background: #f8f8f8;
    height: 40px;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden; 
    margin-top: 15px;
}
.input-phone{
    height: 24px;
    width: 100%;
    background-color: transparent;
    color: #333;
    outline: none;
    border: none;
    padding: 8px 20px;
    font-size:14px;
}
.tab-view{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f8f8;
  border-radius: 20px;
  height:40px;
  line-height:40px;
}
.tab-item{
  flex:1;
  text-align: center;
  cursor: pointer;
}
.tab-item:first-child{
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.tab-item:last-child{
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.activeTab{
  background-color: #0166fc;
  color:#fff;
}
.btn-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/ .btn-bottom .el-button.is-round{
  padding:8px 15px;
  height:36px;
  flex:1;
}
/deep/ .el-button--primary{
  background: #0166fc;
}
/deep/ .el-button--danger{
  background: #f23c48;
}

.handlefees{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-top:8px;
}
.bottom-handlingfees{
  padding:20px 0;
}
.stoploss-input{
  margin-top:2px;
}
.stoploss-view{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:10px;
  font-size:14px;
}
.multip-text{
  margin-top:10px;
  margin-bottom:0;
  font-size:14px;
  height:21px;
  line-height:21px;
}
/deep/ .handle-view .el-select,.el-input-number{
  width:100%;
}
/deep/ .el-input-number{
  height:32px;
  line-height:32px;
}
/deep/ .el-input-number__decrease{
  height:30px;
  line-height:30px;
}
/deep/ .el-input-number__increase{
   height:30px;
  line-height:30px;
}
.price-view{
  margin-top:2px;
}
.coinfounds{
  font-size:20px;
  color:#0166fc;
  height:30px;
  line-height:30px;
}
.coinname-text{
  font-size:14px;
  height:21px;
  line-height:21px;
}
.handle-view{
  padding:20px;
  box-shadow: 0 0 10px #a1a1a11f;
  border-radius: 10px;
  box-sizing: border-box;
}
.founds{
  font-size: 28px;
  font-weight: 700;
  height:42px;
  line-height:42px;
}
.available-text{
  font-size:14px;
  height:21px;
  line-height: 21px;
}
.content-right{
  margin-right:20px;
  width:324px;
  min-width:324px;
  margin-left:10px;
}
.available{
  padding:10px 20px;
  background: #0166fc;
  border-radius:10px;
  color:#fff;
  margin-bottom:18px;
  text-align: center;
}
.stopbuissness{
  color:#fff;
  font-size:12px;
  width:80px;
  border-radius: 8px;
  height:22px;
  line-height:22px;
  background: #cbcbcb;
  text-align: center;
}
.bluecolor{
  background: #0166fc;
}
.redcolor{
  background: #f23c48;
}
.incrise{
  color:#fff;
  font-size:12px;
  width:80px;
  border-radius: 8px;
  height:30px;
  line-height:30px;
  text-align: center;
}
.total-number{

}
.total-number-blue{
  color:#0166fc;
}
.total-number-red{
  color:#f23c48;
}
.leftcoinname,.total-number{
  display: flex;
  align-items: center;
  flex:1;
}
    .coinImg{
      width:36px;
      height:36px;
    }
    .list-item{
      padding:10px;
      display: flex;
      align-items: center;
      border-bottom:1px solid #eee;
    }
    .el-icon-search{
      font-size:20px;
      margin:0 10px 0 16px;
    }
    .searchinput{
      border:none;
      margin:0;
      padding:0;
      height:24px;
      background: #f8f8f8;
      outline: none;
      border-radius: 20px;
      width:152px;
      font-size:16px;
      padding:8px 0;
    }
    .search-view{
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f8f8f8;
      border-radius: 20px;
      height:24px;
      padding:8px 0;
      margin-right:10px;
    }
    .search-select{
      background: #f8f8f8;
      border-radius: 20px;
      height:24px;
      padding:8px 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .product-top{
      display: flex;
      justify-content: space-between;
      padding:10px;
    }
    .tools-view{
      width:90px;
      height:760px;
      border-right:1px solid #ccc;
    }
    .product-view{
      width:350px;
      min-width:350px;
      margin-left:10px;
      border:1px solid #ccc;
      height:760px;
    }
    .kline-view{
      width:100%;
      height:760px;
      border:1px solid #ccc;
      margin-left:10px;
    }
    .padding15{
      padding:8px 15px;
      cursor: pointer;
    }
    .marginright10{
      margin-right:10px;
      width:136px;
      height:32px;
    }
    .margin10{
      margin:0 10px;
    }
    .quota-text{
      margin-left:8px;
      padding:0 12px;
     
    }
    .change-item{
      margin:0 4px 0 8px;
      padding:2px 6px;
    }
    .line38{
      width:0.5px;
      height:38px;
      background-color: #ebedf1;
    }
    .productList-view,.placeOrder{
        margin:0 4px;
        padding:2px 6px;
        cursor: pointer;
        height:24px;
        line-height:24px;
        border-radius: 2px;
    }
    .title{
      font-size: 18px;
      margin-right:10px;
    }
    .page-index-left,ul,.top-product,.quota,.content-view{
      display: flex;
      align-items: center;
      flex-direction: row;
    }
    .page-index-right{
       display: flex;
       align-items: center;
       justify-content: flex-end;
    }
    .page-index{
     padding:10px 20px;
    }
    ul{
      /* margin:0; */
      padding:0;
    }
    ul li{
      /* margin:0;
      padding:0; */
      list-style: none;
    }
    /deep/ .el-input__inner{
      height:32px;
      line-height: 32px;
    }
    /deep/ .el-input__suffix{
      height:32px;
      /*  */
    }
    /deep/ .el-input__icon{
        line-height: 32px;
    }
     /deep/ .search-select .el-input__inner{
        outline:none;
        border:none;
        background: #f8f8f8;
        border-radius: 20px;
     }
    .isactive{
		    color:#1677ff;
		    background-color: #dcebff;
	  }
</style>
